<!-- 文档类型解释为 html -->
<!DOCTYPE html>
<!-- 声明网页语言 -->
<html lang="en">

<head>
    <!-- 定义网页编码格式为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 这个元素标签主要影响IE浏览器的显示效果,不针对其他类型的浏览器。 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 定义网页的缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页的标题 -->
    <title>HTML 入门</title>
    <link rel="stylesheet" href="../css/index.css">
    <style>
* {
	margin-top: 10px;
	border: 1px solid #f00;
	max-width: 100%;
}

html,
body {
	scroll-behavior: smooth;
}

@media screen {
}

    </style>
    <script>
        console.log('%c 🥧 console: ', 'font-size:20px;background-color: #4b4b4b;color:#fff;', console);
    </script>
</head>
<!--  -->

<body id="body">
    <header>
        头部
        <nav>
            <a href="http://get.ftqq.com/6483.get">常用meta</a>
            <a href="./flex.html" target="_blank">flex</a>
            <a href="./float.html" target="_blank">float</a>
            <a href="./grid.html" target="_blank">grid</a>
            <a href="./伪元素.html" target="_blank">伪元素</a>
            <a href="./媒体查询.html" target="_blank">媒体查询</a>
            <a href="./圣杯flex.html" target="_blank">圣杯flex</a>
            <a href="./圣杯float.html" target="_blank">圣杯float</a>
            <a href="./圣杯grid.html" target="_blank">圣杯grid</a>
            <a href="./圣杯position.html" target="_blank">圣杯position</a>
            <a href="./定位.html" target="_blank">定位</a>
            <a href="./盒子模型.html" target="_blank">盒子模型</a>
            <a href="./选择器.html" target="_blank">选择器</a>
            <a href="./动画.html" target="_blank">动画</a>
        </nav>
    </header>
    <main>
        <aside>
            侧边栏
        </aside>
        <article>
            <h1>h1</h1>
            <h2>h2</h2>
            <h3>h3</h3>
            <h4>h4</h4>
            <h5>h5</h5>
            <h6>h6</h6>
            <div>
                div
            </div>
            <p>
                p
            </p>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ol>
            <span>第一个span</span>
            <span>第二个span</span>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4a7872075a72ffc83108c2efcbfc92e5.jpg?thumb=1&w=1226&h=460&f=webp&q=90"
                alt="小米 Note 11SE">
            <audio controls src="../media/music.mp3">
            </audio>
            <video src="https://cdn.cnbj1.fds.api.mi-img.com/miui-13/phone/widgets_1230.mp4" controls></video>
            <table id="table">
                <caption>caption</caption>
                <colgroup>
                    <col span="1" style="background:violet;">
                </colgroup>
                <thead>
                    <th>第一列</th>
                    <th>第二列</th>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                </tfoot>
            </table>
            <form id="form" action="saveFormData/asdasd" method="get">
                <input type="text" required maxlength="5">
                <input type="number" required min="2" max="5">
                <input type="email">
                <input type="password">
                <input type="tel">
                <input type="datetime-local">
                <input type="date">
                <input type="datetime">
                <input type="time">
                <input type="month">
                <input type="week">
                <input type="range">
                <input type="file">
                <input type="color">
                <label for="1"><input type="checkbox" name="checkbox" id="1">11111</label>
                <label for="2"><input type="checkbox" name="checkbox" id="2">22222</label>
                <label for="3"><input type="checkbox" name="checkbox" id="3">33333</label>
                <select name="" id="" required>
                    <option value="">全部</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <textarea name="" id="" cols="30" rows="10"></textarea>
                <label for="4"><input type="radio" name="radio" id="4">44444</label>
                <label for="5"><input type="radio" name="radio" id="5">55555</label>
                <label for="6"><input type="radio" name="radio" id="6">66666</label>
                <input type="submit" value="input提交">
                <input type="reset" value="input重置">
                <button type="submit">button提交</button>
                <button type="reset">button重置</button>
            </form>
        </article>
    </main>
    <footer>
        底部
    </footer>
</body>

</html>